import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Link } from 'react-router-dom';
import { CheckmarkFilled16 as ChoosedIcon } from '@carbon/icons-react';
import s from './NotificationList.module.css';
import fetch from 'API/fetch';
import { datetime } from '../../../../common/formatter';
import { name } from '../../../../../package.json';

export default function NotificationList({
	className,
	notificationList = {},
	type = '',
	onChange,
}) {
	const { newsIUrl } = window?.kuiper?.app?.config[name];

	const [markListStr, setMarkListStr] = React.useState('');

	async function postData(params, i) {
		const res = await fetch('/api/v2/mail/mark', {
			method: 'POST',
			body: JSON.stringify(params),
		});
		if (res.code === 200) {
			let markList_ = markListStr;
			markList_ += markListStr.includes(i) ? '' : `${i}`;
			setMarkListStr(markList_);
			onChange('active');
		}
	}
	const changeMarked = i => {
		return !!markListStr.includes(i);
	};
	const data = notificationList.data || [];
	React.useEffect(() => {
		setMarkListStr('');
	}, [notificationList]);
	return (
		<div className={cn(className, s.notificationList)}>
			<div className={s.itemList}>
				{notificationList.count > 0 ? (
					data.map(
						(
							{ id: notificationId, title, datetime: infoTime, isMarked },
							i
						) => {
							return (
								<div key={notificationId} className={cn(s.item)}>
									{type === '告警通知' ? (
										<Link
											to={`/message/notification-centre/${notificationId}`}
											onClick={() => {
												postData({ mail_ids: [notificationId] }, i);
											}}
										>
											<div className={s.title}>
												<span
													className={s.point}
													style={{
														display: changeMarked(i) ? 'none' : 'block',
													}}
												></span>
												{title}
											</div>
										</Link>
									) : (
										<a
											target="_blank"
											href={`${newsIUrl}news/${
												type === '服务公告' ? 'service' : 'vul'
											}/detail?id=${notificationId}`}
										>
											<div className={cn(s.title, {[s.mw13rem]: type === '告警通知'})}>{title}</div>
										</a>
									)}
									<div className={s.metadata}>
										<div className={s.time}>{datetime(infoTime)}</div>
									</div>
									{type === '告警通知' && (
										<div className={s.actions}>
											<div
												className={cn(s.action, {
													[s.choosed]: isMarked,
												})}
												onClick={() => {
													postData({ mail_ids: [notificationId] }, i);
												}}
											>
												{changeMarked(i) && <ChoosedIcon />}
												已读
											</div>
										</div>
									)}
								</div>
							);
						}
					)
				) : (
					<div className={s.notificationCentre}>暂无信息</div>
				)}
			</div>
		</div>
	);
}

NotificationList.propTypes = {
	className: PropTypes.string,
	notificationList: PropTypes.any,
	type: PropTypes.string,
	onChange: PropTypes.func.isRequired,
};

NotificationList.defaultProps = {
	className: s.notificationList,
};
